<template>
<div class="control-section button-group-container">
    <div class="button-group-section">
        <div id="button-group-control">
            <div class="row">                
                <p class="h5">Default</p>
                <div id="icon" class="e-btn-group">
                    <ejs-button id='watch' iconCss="bg-icons e-btngrp-watch"></ejs-button>
                    <ejs-button id='star' iconCss="bg-icons e-btngrp-star"></ejs-button>
                    <ejs-button id='download' iconCss="bg-icons e-btngrp-download"></ejs-button>
                </div>
            </div>
            <div class="row">                
                <p class="h5">Single selection</p>
                <div id="text" class="e-btn-group">
                    <input type="radio" id="left" name="align" value="left" />
                    <label class="e-btn" for="left">Left</label>
                    <input type="radio" id="center" name="align" value="center" disabled />
                    <label class="e-btn" for="center">Center</label>
                    <input type="radio" id="right" name="align" value="right" />
                    <label class="e-btn" for="right">Right</label>                                    
                </div>
            </div>
            <div class="row">
                <p class="h5">Multiple selection</p>
                <div id="iconandtext" class="e-btn-group">
                    <input type="checkbox" id="bold" name="fontstyle" value="bold" checked />
                    <label class="e-btn" for="bold">
                        <span class="e-btn-icon bg-icons e-btngrp-bold e-icon-left"></span>Bold
                    </label>
                    <input type="checkbox" id="italic" name="fontstyle" value="italic" />
                    <label class="e-btn" for="italic">
                        <span class="e-btn-icon bg-icons e-btngrp-italic e-icon-left"></span>Italic
                    </label>
                    <input type="checkbox" id="underline" name="fontstyle" value="underline" />
                    <label class="e-btn" for="underline">
                        <span class="e-btn-icon bg-icons e-btngrp-underline e-icon-left"></span>Underline
                    </label>
                </div>
            </div>                      
        </div>
    </div>
    <div id="action-description">
        <p>The following sample demonstrates the default functionalities of normal, radio, and checkbox button groups.</p>
    </div>
    <div id="description">
        <p>
            ButtonGroup is a graphical user interface that groups series of buttons horizontally or vertically. This supports radio and checkbox type behaviors.
        </p>
        <p>
            The above sample demonstrates the behaviors of button groups with icon only, text only, and text with icon combinations.
        </p>
        <ul>
            <li><b>Default:</b> Triggers action on button click.</li>
            <li><b>Single selection:</b> Radio type behavior selects a single button and submits its value to the server on form submission. This is showcased with the second button disabled, by default</li>
            <li><b>Multiple selection:</b> Checkbox type behavior selects multiple buttons and submits its selected values to the server on form submission.It is showcased with first button as selected by default.</li>        
        </ul>
        <p>
            More information on ButtonGroup can be found in this
            <a target="_blank" href="https://ej2.syncfusion.com/vue/documentation/button-group/getting-started">
                documentation section</a>.
        </p>
    </div>
</div>
</template>
<style>
/** ButtonGroup sample icons */
@font-face {
    font-family: 'e-bg-icons';
    src:
    url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.bg-icons {
    font-family: 'e-bg-icons' !important;
    speak: none;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.e-btngrp-watch::before {
    content: '\e71b';
}
    
.e-btngrp-star::before {
    content: '\e710';
}
    
.e-btngrp-download::before {
    content: '\e712';
}
    
.e-btngrp-bold::before {
    content: '\e71a'
}
    
.e-btngrp-italic::before {
    content: '\e708';
}
    
.e-btngrp-underline::before {
    content: '\e703';
}

/* custom code start */
.button-group-section {
    width: 320px;
    margin: 0 auto;
    margin-top: 1.7%;
    margin-bottom: 1.7%;
}

.e-bigger .button-group-section {
    width: 350px;
}

.button-group-section .row {
    margin: 0 0 30px 0;
}

.button-group-section .row:last-child {
    margin-bottom: 0;
}

.button-group-section .row .p:first-child {
    margin-top: 0;
}

@media only screen and (max-width: 500px) {
    .button-group-section {        
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .button-group-container {
        overflow-y: scroll;
    }
}
/* custom code end */
</style>
<script>
import Vue from "vue";
import { rippleEffect } from "@syncfusion/ej2-base";

export default Vue.extend({
  mounted: function() {
    var buttons = document.querySelectorAll('label.e-btn');
    var button;
    for (var i = 0; i < buttons.length; i++) {
        button = buttons.item(i);
        rippleEffect(button, { selector: '.e-btn' });
    }
  }
});
</script>